<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>顺风车---我的订单信息确认</title>
<link href="${ctx}/css/panels.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="${ctx}/css/shop-css/common.css" />
<link href="${ctx}/css/shop-css/shoppingcart.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div class="Wrap_cart">

<div id="Top1_FeeInfo" class="mycart_tip">
	<img src="${ctx}/images/shop-img/cart_001.gif" />
</div>

<div id="Top1_order_step2" class="Header_cart" style="width:500px;">
<ul class="Order_cart" id="Order_cart_S2">
	<li class="step1 s1complete"><a href="shopping-cart.action"
		style="color: #000">1.我的购物车</a></li>
	<li class="step2">2.填写核对订单信息</li>
	<li class="step3">3.成功提交订单</li>
</ul>
</div>

<!--mycart_tip end --> 


<div id='Promo_panel'></div>
<div id='Split_panel'></div>


<div class="bluePanel">
<h3><a href="#" class="titleLink" title="订单信息">确认我的订单信息</a></h3>
<div class="box">
<style>
.update{
	background-color:#bedaec;
}
</style>
<form action="${ctx}/shop/shopping-order!save.action" method="post" name="order_out">
<div class="cart_table"><!--收货人地址开始-->
<div id="part_consignee">
<div class='o_show'>

<h2>收货人信息&nbsp;<a id='address_gai' href='javascript:void(0)'
	onclick='openEdit(this)'>[修改]</a>
</h2>
<div class='middle'>
<div id="address_now">
<table>
	<tr>
		<td style='width: 80px;' align='right'>收货人姓名：</td>
		<td><span id="userName_text">王丽</span><input name="userName" type="hidden" value="汪亮"/></td>
	</tr>

	<tr>
		<td align='right'>省/市/区(县)：</td>
		<td><span id="address_text">浙江杭州市下沙区</span>
			<input name="province" type="hidden" value="浙江省"/>
			<input name="city" type="hidden" value="杭州市"/>
			<input name="area" type="hidden" value="杭州"/>
			<input name="town" type="hidden" value="下沙"/>
		</td>
	</tr>

	<tr>
		<td align='right'>地 址：</td>
		<td><span id="location_text">浙江省杭州市下沙区杭州电子科技大学，生活区4号楼</span>
		<input name="location" type="hidden" value="浙江杭州市下沙区杭州电子科技大学，生活区4号楼"/>
		</td>
	</tr>

	<tr>
		<td align='right'>邮 编：</td>
		<td><span id="zip_text">310018</span><input name="zip" type="hidden" value="310018"/></td>
	</tr>

	<tr>
		<td align='right'>固定电话：</td>
		<td><span id="tel_text">13656639521</span><input name="tel" type="hidden" value="13656639521"/></td>
	</tr>

	<tr>
		<td align='right'>手机号码：</td>
		<td><span id="phone_text">13656639521</span><input name="phone" type="hidden" value="13656639521"/></td>
	</tr>

</table>
</div>
<div id="address_update" class="update" style="display:none;">
<table>
	<tr>
		<td style='width: 80px;' align='right'>收货人姓名：</td>
		<td><input name="userName_temp" type="text" value="王丽"/></td>
	</tr>

	<tr>
		<td align='right'>省/市/区(县)：</td>
		<td>
			<input name="province_temp" type="text" style="width:80px;" value="浙江省"/>
			<input name="city_temp" type="text" style="width:80px;" value="杭州市"/>
			<input name="area_temp" type="text" style="width:80px;" value="杭州"/>
			<input name="town_temp" type="text" style="width:80px;" value="下沙"/>
		</td>
	</tr>

	<tr>
		<td align='right'>地 址：</td>
		<td>
			<input name="location_temp" type="text" style="width:346px;" value="浙江杭州市下沙区杭州电子科技大学，生活区4号楼"/>
		</td>
	</tr>

	<tr>
		<td align='right'>邮 编：</td>
		<td><input name="zip_temp" type="text" value="310018"/></td>
	</tr>

	<tr>
		<td align='right'>固定电话：</td>
		<td><input name="tel_temp" type="text" value="13656639521"/></td>
	</tr>

	<tr>
		<td align='right'>手机号码：</td>
		<td><input name="phone_temp" type="text" value="13656639521"/></td>
	</tr>

	<tr>
		<td style='text-align: right; width: 80px;'><input class="address" type="button" value="确   定" onclick="update_address(this);"/></td>
		<td><input class="address" type="button"  value="取    消" onclick="closeEdit(this)"/></td>
	</tr>
</table>
</div><!--end of editor  -->
</div>
<div class='item_footer'></div>
</div>

</div>
<!--收货人地址结束--> 
<!--支付方式开始-->
<div id="part_payTypeAndShipType">
<div class='o_show'>
<h2>支付方式&nbsp;<a id='pay_gai' href='javascript:void(0)' onclick='openEdit(this);'>[修改]</a>
</h2>
<div class='middle'>
<div id="pay_now">
<table style='width: 100%;'>
	<tr>
		<td style='text-align: right; width: 80px;'>支付方式：</td>
		<td>货到付款</td>
	</tr>
</table>
</div>
<div id='pay_update' class="update" style="display:none;">
<table style='width: 100%;'>
	<tr>
		<td style='text-align: right; width: 80px;'>说明：</td>
		<td>对不起，目前只支持货到付款！其他支付方式敬请期待。。。</td>
	</tr>
	<tr>
		<td style='text-align: right; width: 80px;'><input class="pay" type="button" value="确   定" onclick="closeEdit(this)"/></td>
		<td><input class="pay" type="button"  value="取    消" onclick="closeEdit(this)"/></td>
	</tr>
</table>
</div>
</div>

<div class='item_footer'></div>
</div>
</div>
<!--支付方式结束--> 

<!--配送方式开始-->
<div id="part_invoice">
<div class='o_show'>
<h2>配送方式&nbsp;<a id="peisong_gai" href='javascript:void(0)' onclick='openEdit(this)'>[修改]</a></h2>
<div class='middle'>
<div id="peisong_now">
<table style='width: 100%;'>
	<tr>
		<td style='text-align: right; width: 80px'>送货方式：</td>
		<td><span id="peisongMethod_text">送货上门</span><input type="hidden" name="peisongMethod" value="送货上门"/></td>
	</tr>
	<tr>
		<td style='text-align: right; width: 80px'>送货时间：</td>
		<td><span id="peisongTime_text">2010/04/10</span><input type="hidden" name="peisongTime" value="2010-04-10"/></td>
	</tr>
	<tr>
		<td style='text-align: right; width: 80px'>送货费用：</td>
		<td><span id="peisongCost_text">0.00<span style='color: red'>(免运费)</span></span>元
			<input type="hidden" name="peisongCost" value="0.00"/>
			<input type="hidden" name="peisongAddressId" value=""/>
		</td>
	</tr>
	<!--其他方式有：  -->
</table>
</div>
<div id="peisong_update" class="update" style="display:none;">
<table>
	<tr>
		<td style='text-align:left;width:220px;padding-left:20px;'><input name="method" type="radio" value="1"/>送货上门</td>
		<td style='text-align:left;width:220px;'><input name="method" type="radio" value="2"/>快递公司</td>
		<td><input name="method" type="radio" value="3"/>用户自提</td>
	</tr>
	<tr>
		<td style="padding-left:20px;"><table>
			<tr>
				<td style='text-align: right;'>送货方式：</td>
				<td>送货上门<input name="peisongMethod_temp_1" type="hidden" value="送货上门"/></td>
			</tr>
			<tr>
				<td style='text-align: right;'>送货时间：</td>
				<td><input name="peisongTime_temp_1" type="text" value="2010-04-10"/></td>
			</tr>
			<tr>
				<td style='text-align: right;'>送货费用：</td>
				<td>0.00元<span style='color: red'>(免运费)</span>
					<input name="peisongCost_temp_1" type="hidden" value="0.00"/>
				</td>
			</tr>
		</table></td>
		<td><table>
			<tr>
				<td style='text-align: right;'>送货方式：</td>
				<td><input name="peisongMethod_temp_2" type="text" value="****快递"/></td>
			</tr>
			<tr>
				<td style='text-align: right;'>送货时间：</td>
				<td><input name="peisongTime_temp_2" type="text" value="2010-04-10"/></td>
			</tr>
			<tr>
				<td style='text-align: right;'>送货费用：</td>
				<td>15.00元
					<input name="peisongCost_temp_2" type="hidden" value="15.00"/>
				</td>
			</tr>
		</table></td>
		<td><table>
			<tr>
				<td style='text-align: right;'>送货方式：</td>
				<td>用户自提<input name="peisongMethod_temp_3" type="hidden" value="用户自提"/></td>
			</tr>
			<tr>
				<td style='text-align: right;'>自提时间：</td>
				<td><input name="peisongTime_temp_3" value="2010-04-10"/></td>
			</tr>
			<tr>
				<td style='text-align: right;'>提货地址：<input type="hidden" name="peisongCost_temp_3" value="0.00"/></td>
				<td>杭州电子科技大学，活动中心303室</td>
			</tr>
		</table></td>
	</tr>

    <tr>
		<td colspan="3" style='text-align: left;padding-left:35px;'>
			<input class="peisong" type="button" value="确   定" onclick="update_peisong(this);"/>
			<input class="peisong" type="button"  value="取    消" onclick="closeEdit(this)"/>
		</td>
	</tr>
</table>
</div>
</div>
<div class='item_footer'></div>
</div>
</div>
<!--配送方式结束--> 

<!--备注信息开始-->
<div id="part_remark">
<div class='o_show'>
<h2>订单备注&nbsp;<a id="bak_gai" href='javascript:void(0)' onclick='openEdit(this)'>[修改]</a></h2>
<div class='middle'>
<div id="bak_now">
<table style='width: 100%'>
	<tr>
		<td style='text-align: right; width: 80px'>备注：</td>
		<td><span id="bak_text">暂无备注</span><input name="bak" type="hidden" value="暂无备注"/></td>
	</tr>
</table>
</div>
<div id="bak_update" class="update" style="display:none;">
<table>
	<tr>
		<td style='text-align: right; width: 80px'>备注：</td>
		<td><input type="text" name="bak_temp" class="bak_temp" value="暂无备注"/></td>
	</tr>
	<tr>
		<td style='text-align: right; width: 80px'>
			<input class="bak" type="button" value="确   定" onclick="update_bak(this);"/>
		</td>
		<td><input class="bak" type="button"  value="取    消" onclick="closeEdit(this)"/></td>
	</tr>
</table>
</div>
</div>
<div class='item_footer'></div>
</div>
</div>
<!--备注信息结束-->
 
<!--Cart信息开始-->
<div id="part_cart">
<div class='o_show'>
<h2><span style='margin-right: 700px;'>商品清单</span>
	<a href='shopping-cart.action' style='color: #0070D7'>返回修改购物车</a>
</h2>
<div class='middle'>
<input type="hidden" name="buyerId" value="<s:property value="userId"/>"/>
<table class='Table' cellpadding='0' cellspacing='0' width='100%'>
	<tr class='align_Center Thead'>
		<td width='7%' style='height: 30px'>商品编号</td>
		<td>商品名称</td>
		<td width='10%'>商品单价</td>
		<td width='8%'>商品类型</td>
		<td width='8%'>状态</td>
		<td width='9%'>商品数量</td>
	</tr>

	<s:iterator value="#session.shopCart.buyList" status="itStatus">
	<tr class='align_Center'>
		<td style='padding: 5px 0 5px 0;'><s:property value="productId"/></td>
		<td class='align_Left'>
		<a target='_blank' href='#'
		   onclick='this.blur();'><s:property value="productName"/></a>
		</td>
		<td><span class='price'>￥<s:property value="unitPrice"/></span></td>
		<td><s:property value="productType"/></td>
		<td><s:property value="status"/></td>
		<td><s:property value="quantity"/></td>
	</tr>
	</s:iterator>
		
	<!--
	<tr class='align_Center'>
		<td style='padding: 5px 0 5px 0;'>177171</td>
		<td class='align_Left'><a target='_blank'
			href='http://www.360buy.com/product/177171.html'
			onclick='this.blur();'>苹果（Apple）iPod Touch 32G 3代 MC008CH/A多媒体播放器（黑色）</a>
		</td>
		<td><span class='price'>￥2,199.00</span></td>
		<td>￥0.00</td>
		<td>0</td>
		<td>现货</td>
		<td>1</td>
	</tr>
	-->
</table>
</div>
<div class='item_footer'></div>
</div>

</div>
<!--Cart信息结束-->

<div id="ware_info">

<div style="background: #fff; font-size: 14px; font-weight: bold; padding-left: 2px;">结算信息</div>
<div class="middle"><!--订单信息-->
<ul id='part_info'>
	<li class='info1' style='padding-bottom: 5px'>
		商品金额：<s:property value="#session.shopCart.totalCost"/>元 +运费：0.00元  <br />
	</li>

	<li class='info2' style='width: 100%; overflow: hidden;'>
	<table style='width: 100%' cellpadding='0' cellspacing='0'>
		<tr>
			<td>
			</td>
			<td style='text-align: right; font-size: 15px;'>
				<b>应付总额：<font color='red'>￥<s:property value="#session.shopCart.totalCost"/></font> 元</b>
				<input type="hidden" id="total_amount" value="<s:property value='#session.shopCart.amount'/>"/>
			</td>
		</tr>
	</table>
	</li>
</ul>
<!--订单信息结束-->
<div style="clear: both"></div>
</div>
</div>



<!--提交-->
<div class="o_show submit" style="float:right;">
	<div><span id="submitWaitInfo"></span></div>
	<div id="submit_error"></div>
	<div id="submit_btn">
		<input id="submit" type="submit" onclick='return submitOrder();' value=""
			   style="margin-top: 2px; border: none; cursor: pointer; width: 127px; height: 35px; background: url(${ctx}/images/shop-img/order_click.jpg) no-repeat" />
	</div>
	
</div><div class="clear"></div>
<div class='item_footer'></div>
<!--提交结束-->
</div>
</form>
<script type="text/javascript">

function getName(name){
	return document.getElementsByName(name)[0].value;
}
function setName(name,val){
	document.getElementsByName(name)[0].value = val; 
}

function changeShow(id,val){
	id = "#" + id;
	$(id).empty();
	$(id).html(val);
}
function submitOrder(){
	if($("#total_amount").val() == 0){
		alert("您没有购买一件物品");
		return false;
	}else{
		return true;
	}
};
function openEdit(o){
	var name = $(o).attr("id");
	name = name.substring(0,name.lastIndexOf("_"));
	//alert(name);
	var gai = "#"+name+"_gai";
	var now = "#"+name+"_now";
	var update = "#"+name+"_update";
	//alert(update);
	
	$(now).css("display","none");
	$(update).css("display","");
	$(o).css("display","none");
};
function closeEdit(o){
	var name = $(o).attr("class");
	var gai = "#"+name+"_gai";
	var now = "#"+name+"_now";
	var update = "#"+name+"_update";
	
	//alert(name);
	$(gai).css("display","");
	$(now).css("display","");
	$(update).css("display","none");
};
//更新各部分数据的js操作
function update_bak(o){
	var name = $(o).attr("class");
	var name_temp = name+"_temp";
	var name_temp_value = getName(name_temp);
	var name_text = "#"+name+"_text";

	setName(name,name_temp_value);

	$(name_text).empty();
	$(name_text).html(name_temp_value);

	closeEdit(o);
}

function update_peisong(o){
	var radio = document.getElementsByName("method");
	var s = 0;
	for(var i=0;i<radio.length;i++){
		if(radio[i].checked == true){
			s = radio[i].value;
			break;
		}
	}
	//alert(s);
	if(s == 0){
		alert("Sorry,您还没有选择！");
		return;
	}
	var name = $(o).attr("class");
	//alert(name);
	var name_m = name+"Method";
	var name_t = name+"Time";
	var name_c = name+"Cost";
	
	var name_m_temp = name+"Method_temp_"+s;
	var name_t_temp = name+"Time_temp_"+s;
	var name_c_temp = name+"Cost_temp_"+s;

	var m_val = getName(name_m_temp);
	var t_val = getName(name_t_temp);
	var c_val = getName(name_c_temp);

	setName(name_m,m_val);
	setName(name_t,t_val);
	setName(name_c,c_val);

	//alert(name_c);
	//alert(m_val);
	//alert(t_val);
	//alert(c_val);

	var name_m_text = "#"+name_m+"_text";
	var name_t_text = "#"+name_t+"_text";
	var name_c_text = "#"+name_c+"_text";

	$(name_m_text).empty();
	$(name_m_text).html(m_val);

	$(name_t_text).empty();
	$(name_t_text).html(t_val);

	$(name_c_text).empty();
	$(name_c_text).html(c_val);
	
	closeEdit(o);
}

function update_address(o){
	var userName = getName("userName_temp");
	var province = getName("province_temp");
	var city     = getName("city_temp");
	var area     = getName("area_temp");
	var town     = getName("town_temp");
	var location = getName("location_temp");
	var tel      = getName("tel_temp");
	var phone    = getName("phone_temp");
	var zip      = getName("zip_temp");
	var email    = getName("email_temp");

	setName("userName",userName);
	setName("province",province);
	setName("city",city);
	setName("area",area);
	setName("town",town);
	setName("location",location);
	setName("tel",tel);
	setName("phone",phone);
	setName("zip",zip);
	setName("email",email);

	changeShow("userName_text",userName);
	changeShow("address_text",province+city+area+town);
	changeShow("location_text",location);
	changeShow("tel_text",tel);
	changeShow("phone_text",phone);
	changeShow("zip_text",zip);
	changeShow("email_text",email);

	closeEdit(o);

}
</script>
</div>
</div>
</div>

</body>
</html>